
@-webkit-keyframes fadein {
	from {
		bottom: -120px;
		opacity: 0;
	}
	to {
		bottom: 0;
		opacity: 1;
	}
}

@keyframes fadein {
	from {
		bottom: -120px;
		opacity: 0;
	}
	to {
		bottom: 0;
		opacity: 1;
	}
}

.accounts-card {
	background-color: transparent;
	border: 1px solid #565656;
	box-shadow: none;
	color: #848484;
}

.accounts-section {
	border-bottom: 1px solid #444444;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: background-color;
	transition-property: background-color;
}

.accounts-section:hover {
	background-color: #2b2b2b;
}

.constitution {
	border: 1px solid #484848;
	border-radius: 4px;
	padding: 10px 10px;
	max-height: 260px;
	margin-top: 5px;
	overflow-y: scroll;
	color: #808080;
	margin-bottom: 10px;
}

.chains-card {
	background-color: transparent;
	border: 1px solid #565656;
	box-shadow: none;
}

.chain-section {
	border-bottom: 1px solid #444444;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: background-color;
	transition-property: background-color;
}

.chain-section:not(.selected):hover {
	background-color: var(--main-background);
	cursor: pointer;
}

.connect-anim {
	visibility: hidden;
}

.chain-section:hover > .connect-anim {
	visibility: visible;
	animation: fadeInRight 800ms;
}

/*@-webkit-keyframes fadeInRight {*/
/*0% {*/
/*opacity: 0;*/
/*left: 120px;*/
/*}*/
/*100% {*/
/*opacity: 1;*/
/*left: 0;*/
/*}*/
/*}*/

@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.skull-icon {
	font-size: 22px;
	margin-left: -1px;
}

.nav-link {
	height: 1.7rem !important;
	cursor: pointer;
}

.main-container .header, .main-container header {
	flex: 0 0 2rem;
}


.traffic-lights {
	top: 1px;
	left: 8px;
	margin-top: 8px;
	margin-right: 20px;
}
.focus .traffic-lights > .traffic-light-close, .traffic-lights:hover > .traffic-light-close, .traffic-lights:active > .traffic-light-close {
	background-color: #ff6159;
}
.focus .traffic-lights > .traffic-light-close:active:hover, .traffic-lights:hover > .traffic-light-close:active:hover, .traffic-lights:active > .traffic-light-close:active:hover {
	background-color: #bf4942;
}
.focus .traffic-lights > .traffic-light-minimize, .traffic-lights:hover > .traffic-light-minimize, .traffic-lights:active > .traffic-light-minimize {
	background-color: #ffbd2e;
}
.focus .traffic-lights > .traffic-light-minimize:active:hover, .traffic-lights:hover > .traffic-light-minimize:active:hover, .traffic-lights:active > .traffic-light-minimize:active:hover {
	background-color: #bf8e22;
}
.focus .traffic-lights > .traffic-light-maximize, .traffic-lights:hover > .traffic-light-maximize, .traffic-lights:active > .traffic-light-maximize {
	background-color: #28c941;
}
.focus .traffic-lights > .traffic-light-maximize:active:hover, .traffic-lights:hover > .traffic-light-maximize:active:hover, .traffic-lights:active > .traffic-light-maximize:active:hover {
	background-color: #1d9730;
}
.traffic-lights > .traffic-light:before, .traffic-lights > .traffic-light:after {
	visibility: hidden;
}
.traffic-lights:hover > .traffic-light:before, .traffic-lights:hover > .traffic-light:after, .traffic-lights:active > .traffic-light:before, .traffic-lights:active > .traffic-light:after {
	visibility: visible;
}

.traffic-light {
	border-radius: 100%;
	padding: 0;
	height: 12px;
	width: 12px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
	margin-right: 3.5px;
	background-color: #ddd;
	position: relative;
	outline: none;
}
.traffic-light:before, .traffic-light:after {
	content: '';
	position: absolute;
	border-radius: 1px;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
.traffic-light-close:before, .traffic-light-close:after {
	background-color: #4d0000;
	width: 8px;
	height: 1px;
}
.traffic-light-close:before {
	transform: rotate(45deg);
}
.traffic-light-close:after {
	transform: rotate(-45deg);
}
.traffic-light-close:active:hover:before, .traffic-light-close:active:hover:after {
	background-color: #190000;
}
.traffic-light-minimize:before {
	background-color: #995700;
	width: 8px;
	height: 1px;
}
.traffic-light-minimize:active:hover:before {
	background-color: #592800;
}
.traffic-light-maximize:before {
	background-color: #006500;
	width: 6px;
	height: 6px;
}
.traffic-light-maximize:after {
	background-color: #28c941;
	width: 10px;
	height: 2px;
	transform: rotate(45deg);
}
.traffic-light-maximize:active:hover:before {
	background-color: #003200;
}
.traffic-light-maximize:active:hover:after {
	background-color: #1d9730;
}

.close-icon:hover {
	background-color: rgba(255, 0, 0, 0.7);
}

.other-icon:hover {
	background-color: rgba(0,0,0,.42);
}

/*.alert-text {*/
/*margin-left: 21px;*/
/*}*/

/*JSON formatter*/
/deep/ .segment-key {
	color: var(--text-highlight) !important;
}

/deep/ .transit-json .ngx-json-viewer {
	font-family: 'open sans' !important;
}

/deep/ .transit-json .ngx-json-viewer .segment-type-string > .segment-main > .segment-value {
	color: #f34d4d !important;
}
/*JSON formatter end*/

.header-actions a {
	padding: 0;
}
